<style>
  .main-container {
    display: grid;
    grid-template-columns: minmax(150px, 50%) 1fr;
    height: 100vh;
    overflow: hidden;
  }

  .main-container > * {
    overflow-y: auto
  }

  textarea {
    padding: 0;
    width: 100%;
  }
</style>
<div class="main-container">
  <form id="myForm" method="post">
    <button type="submit">submit</button>
    <button type="reset">reset</button>
    <input type="hidden" name="tag" value="nlp">
    <fieldset>
      <legend>input:</legend>
      <label for="type">type:</label>
      <select id="type" name="type" style="width: 100%">
        <option value="word_segmentation">word_segmentation</option>
        <option value="pos_tagging">pos_tagging</option>
        <option value="ner">ner</option>
        <option value="information_extraction" selected>information_extraction</option>
        <option value="text_summarization">text_summarization</option>
        <option value="feature_extraction">feature_extraction</option>
      </select>
      <br>
      <label for="schema">schema:</label>
      <textarea id="schema" name="schema" placeholder="..." style="min-height: 100px"></textarea>
      <br>
      <label for="text">text:</label>
      <textarea id="text" name="text" placeholder="..." style="min-height: 500px" required></textarea>
    </fieldset>
  </form>
  <textarea id="result" style="height: 100%" readonly></textarea>
</div>
<script type="module">
  const form = document.getElementById('myForm');
  const resultDiv = document.getElementById('result');
  const dialog = document.querySelector('body > dialog');

  form.addEventListener('submit', function (event) {
    resultDiv.innerText = 'Loading';
    event.preventDefault(); // 阻止表单的默认提交行为
    const formData = new FormData(form); // 创建 FormData 对象，会自动收集表单中的所有数据
    fetch('/upload/', {method: 'POST', body: formData})
      .then(response => {
        if (!response.ok) throw new Error('网络请求失败, 状态码: ' + response.status);
        return response.json();
      })
      .then(data => {
        resultDiv.innerHTML = JSON.stringify(data, null, '  ');
      })
      .catch(error => {
        resultDiv.textContent = JSON.stringify(error);
        resultDiv.style.color = 'red';
      });
  });
</script>